<template>
  <a-drawer
    :title="isAdd?'新增链路':'编辑链路'"
    :width="1000"
    :visible="isShow"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    @close="closeDrawer"
  >
    <a-form
      :model="form"
      :rules="rules"
      layout="vertical"
      ref="formRef"
      @finish="isAdd?saveLianlu():updataLianlu()"
    >
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="链路编号" name="lianlu_code">
            <a-select
              ref="select"
              v-model:value="form.lianlu_code"
              :showSearch="true"
              allowClear
              @change="selectChange"
              placeholder="请选择链路编号"
            >
              <a-select-option value="请选择链路编号" disabled>请选择链路编号</a-select-option>
              <a-select-opt-group>
                <template #label>总局</template>
                <a-select-option
                  v-for="(item, index) in selectLianluList.zongjuList"
                  :key="item.lianlu_code+index"
                  :value="item.lianlu_code"
                  :lianluName="item.lianlu_name"
                  :dbName="[item.lianlu_start, item.lianlu_end]"
                >{{item.lianlu_code}}</a-select-option>
              </a-select-opt-group>
              <a-select-opt-group>
                <template #label>内蒙</template>
                <a-select-option
                  v-for="(item, index) in selectLianluList.neimengList"
                  :key="item.lianlu_code+index"
                  :value="item.lianlu_code"
                  :lianluName="item.lianlu_name"
                  :dbName="[item.lianlu_start, item.lianlu_end]"
                >{{item.lianlu_code}}</a-select-option>
              </a-select-opt-group>
              <a-select-opt-group>
                <template #label>广东</template>
                <a-select-option
                  v-for="(item, index) in selectLianluList.guangdongList"
                  :key="item.lianlu_code+index"
                  :value="item.lianlu_code"
                  :lianluName="item.lianlu_name"
                  :dbName="[item.lianlu_start, item.lianlu_end]"
                >{{item.lianlu_code}}</a-select-option>
              </a-select-opt-group>
              <a-select-opt-group>
                <template #label>上海</template>
                <a-select-option
                  v-for="(item, index) in selectLianluList.shanghaiList"
                  :key="item.lianlu_code+index"
                  :value="item.lianlu_code"
                  :lianluName="item.lianlu_name"
                  :dbName="[item.lianlu_start, item.lianlu_end]"
                >{{item.lianlu_code}}</a-select-option>
              </a-select-opt-group>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="链路名称" name="lianlu_name">
            <a-input v-model:value="form.lianlu_name" placeholder="请输入链路名称"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="源端数据库" name="lianlu_start">
            <a-input v-model:value="form.lianlu_start" placeholder="请输入源端数据库名称"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="目标数据库" name="lianlu_end">
            <a-input v-model:value="form.lianlu_end" placeholder="请输入目标数据库名称"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="问题发现时间" name="error_time_start">
            <a-date-picker
              v-model:value="form.error_time_start"
              :show-time="{ format: 'HH:mm' }"
              format="YYYY/MM/DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
              placeholder="请选择问题发现时间"
              style="width: 100%"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="问题修复时间" name="error_time_end">
            <a-date-picker
              v-model:value="form.error_time_end"
              :show-time="{ format: 'HH:mm' }"
              format="YYYY/MM/DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
              placeholder="请选择问题修复时间"
              style="width: 100%"
              allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="问题简要原因" name="error_reason">
            <a-textarea
              :rows="2"
              v-model:value="form.error_reason"
              placeholder="请输入问题简要原因"
              allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="计划内升级或异常" name="plan_error">
            <a-radio-group v-model:value="form.plan_error">
              <a-radio value="计划内升级">计划内升级</a-radio>
              <a-radio value="异常">异常</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="链路异常日期" name="record_date">
            <a-date-picker
              v-model:value="form.record_date"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
              placeholder="请选择链路异常日期"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item :wrapper-col="{ offset: 20 }">
            <a-space>
              <a-button @click="closeDrawer">取消</a-button>
              <a-button type="primary" html-type="submit">保存</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #extra>
      <a-space>
        <a-button type="primary" @click="resetForm">重置</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { FormInstance, message } from 'ant-design-vue';
import { getAllZongjuLianlu } from "@/utils/zongjuLianlu";
import { getAllLianluListApi as getAllNeimengLianlu } from "@/utils/neimengLianlu";
import { getAllLianluListApi as getAllGuangdongLianlu } from "@/utils/guangdongLianlu";
import { getAllLianluListApi as getAllShanghaiLianlu } from "@/utils/shanghaiLianlu";
import { createErrorLianluApi, updataErrorLianluApi } from '@/utils/errorLianlu';

interface ErrorLianluDto {
  id?: number
  lianlu_code: string
  lianlu_name: string
  lianlu_start: string
  lianlu_end: string
  error_time_start: string
  error_time_end: string
  error_reason: string
  plan_error: string
  record_date: string
}

interface LianluListDto {
  id: number
  lianlu_code: string
  lianlu_name: string
  lianlu_start: string
  lianlu_end: string
  lianlu_status: number
}

interface SelectOptionDto {
  key: string
  value: string
  dbName: [string, string]
  lianluName: string
}

interface ResultDto {
  code: number
  data: Array<ErrorLianluDto>
  message: string
}

const rules: Record<string, Rule[]> = {
  lianlu_code: [{ required: true, message: '请选择链路编号', trigger: 'blur' }],
  lianlu_name: [{ required: true, message: '请输入链路名称' }],
  lianlu_start: [{ required: true, message: '请输入源端数据库' }],
  lianlu_end: [{ required: true, message: '请输入目标数据库' }],
  error_time_start: [{ required: true, message: '请选择问题发现时间' }],
  record_date: [{ required: true, message: '请选择链路异常时间' }],
};

export default defineComponent({
  components: {},
  props: ['isShow', 'isAdd', 'editErrorLianluData', 'errorLianluId'],
  setup(props, context) {
    const formRef = ref<FormInstance>();
    // 错误信息id
    let errorLianlulId = ref<string>('');
    // 表格数据
    let form = reactive<ErrorLianluDto>({
      lianlu_code: '',
      lianlu_name: '',
      lianlu_start: '',
      lianlu_end: '',
      error_time_start: '',
      error_time_end: '',
      error_reason: '',
      plan_error: '异常',
      record_date: ''
    });
    // 下拉列表：链路列表
    let selectLianluList = reactive({
      zongjuList: [] as LianluListDto[],
      neimengList: [] as LianluListDto[],
      guangdongList: [] as LianluListDto[],
      shanghaiList: [] as LianluListDto[]
    });
    // 保存异常链路信息
    const saveLianlu = () => {
      createErrorLianluApi(form).then(res => {
        const result = res as unknown as ResultDto;
        if (result.code === 200) {
          context.emit('queryErrorLianluList');
          message.success(result.message);
          closeDrawer();
        }
      })
    }
    // 编辑异常链路信息
    const updataLianlu = () => {
      updataErrorLianluApi(errorLianlulId.value, form).then(res => {
        const result = res as unknown as ResultDto;
        if (result.code === 200) {
          context.emit('queryErrorLianluList');
          message.success(result.message);
          closeDrawer();
        }
      })
    }
    // 选择链路编号
    const selectChange = (value: string, option: SelectOptionDto) => {
      form.lianlu_name = option.lianluName;
      form.lianlu_start = option.dbName[0];
      form.lianlu_end = option.dbName[1];
    }
    // 获取链路信息列表，并渲染下拉列表
    const initSelectLianluList = () => {
      getAllZongjuLianlu().then(res => {
        selectLianluList.zongjuList.length = 0;
        selectLianluList.zongjuList.push(...res.data);
      })
      getAllNeimengLianlu().then(res => {
        selectLianluList.neimengList.length = 0;
        selectLianluList.neimengList.push(...res.data);
      })
      getAllGuangdongLianlu().then(res => {
        selectLianluList.guangdongList.length = 0;
        selectLianluList.guangdongList.push(...res.data);
      })
      getAllShanghaiLianlu().then(res => {
        selectLianluList.shanghaiList.length = 0;
        selectLianluList.shanghaiList.push(...res.data);
      })
    }
    // 重置表单内容
    const resetForm = () => {
      const value = formRef.value as FormInstance;
      value.resetFields();
    };
    // 关闭抽屉
    const closeDrawer = function () {
      resetForm();
      context.emit('closeDrawer')
    }
    onMounted(() => {
      initSelectLianluList();
    })
    watch(props, () => {
      Object.assign(form, props.editErrorLianluData);
      // form.error_time_start = String(new Date(form.error_time_start));
      errorLianlulId.value = props.errorLianluId;
    }, { deep: true });
    return {
      rules,
      form,
      formRef,
      selectLianluList,
      // fun
      resetForm,
      closeDrawer,
      saveLianlu,
      updataLianlu,
      selectChange
    };
  },
});
</script>

<style scoped>
</style>
